<template>
  <div class="page">
    <headerTItle :CNtitle="`新闻资讯`" :ENtitle="`NEWS&INFORMATIONS`"></headerTItle>
    <div style="margin-top: 2.8125rem">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="item,index in info.news_cate" :label="item.cate_name" :name="String(item.news_cate_id)" :key="index"></el-tab-pane>
      </el-tabs>
      <div class="newsList">
        
          <div  v-for="item in info.news" :key="item.news_id">
            <a  class="newsBox" :href=" item.out_link">
            <div class="newsImg">
              <img  :src="item.img" alt="" />
            </div>
            
            <div class="newsInfo">
              <div class="newsTitle">{{ item.title }}</div>
              <div class="newsTime">{{ item.created_at }}</div>
              <div class="newsContent">
                {{ item.dec }}内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
              </div>
              <div class="readMore">
                <el-button type="primary">详情</el-button>
              </div>
              
            </div>
            </a>
          </div>
         
      </div>
      <div class="pageination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import headerTItle from "@/components/headerTItle.vue";
import{getNewsList,getIndexInfo,getWebSite}from "@/api/index"
export default {
  data() {
    return {
       info: {
        banner:[],
        info:{
          title:'',
          video:''
        }
      },
      webInfo: {
        web_site:{
          contact_all_img:''
        }
      },
      activeName: '',
    };
  },
  created() {
    getWebSite({code:'fb'}).then(res => {
      this.webInfo = res.data
    })
    getIndexInfo({code:'fb'}).then(res => {
      this.info = res.data
       this.activeName = String(this.info.news_cate[0].news_cate_id)
        this.numList = JSON.parse(this.info.info.data_sector)
    })
  },
  methods: {
    handleClick(tab) {
      console.log(tab);
    },
  },
  components: {
    headerTItle,
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/_variables.scss";
 .newsList {
    margin-top: 2.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1.25rem;
    .newsBox {
      display: flex;
      height: 13.1875rem;
      background: #fff;
      border-radius: 0.5rem;
      box-sizing: border-box;
      
      position: relative;
      .newsImg{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 23.375rem;
        height: 13.1875rem;
        margin-right: 1rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .newsInfo{
        width: 75%;
        .newsTitle{
          font-size: 1.25rem;
          font-weight: 600;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .newsContent{
          font-size: 1.125rem;
          width: 63.125rem;
          height: 3.125rem;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;

        }
        .newsTime{
          font-size: .875rem;
          font-weight: 400;
          color: #C4C4C4;
          margin:2rem 0 .75rem 0;
        }
        .readMore{
          font-size: .875rem;
          font-weight: 400;
          width: 10.75rem;
          height: 2.5rem;
          position: absolute;
          bottom: 0;
          .el-button--primary{
            width: 100%;
            height: 100%;
          }
        }
      }

    }
  }
  .pageination{
    display: flex;
    margin: 2.8125rem 0;
    box-sizing: border-box;
    padding: 0 15rem;
    justify-content: center;
  }
::v-deep .el-tabs__item {
  padding: 1.5625rem 2.9375rem !important;
  font-size: 1.875rem;
  color: #000;
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  background: #1b6acc;
  color: #fff;
}
::v-deep .is-top {
  border: none !important;
  display: flex;
  justify-content: center;
}
::v-deep .el-tabs__header {
  margin: 0 !important;
}
::v-deep .el-divider {
  background-color: #000;
}
::v-deep .el-tabs__item {
  padding: 0.5rem 1.25rem !important;
  font-size: 1.125rem;
  margin-right: 1.5rem;
  border-radius: 0.5rem;
  background: #f5f5f5;
  color: $btn-color;
}
a{
  text-decoration: none;
  color: #000;
}
</style>
